<template>
  <div class="base-container">
    <h4 class="form-header">基本信息</h4>
    <t-form labelWidth="80px">
      <t-row>
        <t-col :span="4" :offset="1">
          <t-form-item label="真实姓名" name="nickName">
            <t-input clearable v-model="formData.nickName" disabled></t-input>
          </t-form-item>
        </t-col>
        <t-col :span="4" :offset="1">
          <t-form-item label="登录账号" name="userName">
            <t-input clearable v-model="formData.userName" disabled></t-input>
          </t-form-item>
        </t-col>
      </t-row>
    </t-form>
    <h4 class="form-header">角色信息</h4>
    <t-table
      rowKey="id"
      :data="data.slice((queryParams.pageNum-1)*queryParams.pageSize,(queryParams.pageNum*queryParams.pageSize))"
      :columns="columns"
      :selected-row-keys.sync="roleIds"
      hover
      :pagination="pagination"
      :loading="dataLoading"
    >
      <template #index="{ rowIndex } ">
        {{ (queryParams.pageNum - 1) * queryParams.pageSize + rowIndex + 1 }}
      </template>
    </t-table>
    <div style="display:flex;justify-content: center">
      <t-button theme="primary" @click="onSubmit">提交</t-button>
      <t-button variant="outline" @click="close">返回</t-button>
    </div>

  </div>
</template>

<script>
import {getAuthRole, updateAuthRole} from "@/api/system/user";

export default {
  name: "user-role-index",
  data() {
    return {

      formData: {},
      data: [],
      // 选中角色编号
      roleIds: [],
      columns: [
        {
          colKey: "index",
          title: "序号",
          align: "center"
        },
        {
          colKey: 'row-select',
          type: 'multiple',
          className: 'demo-multiple-select-cell',
          width: 55,
        },
        {
          colKey: "id",
          title: "角色编号",
          align: "center"
        },
        {
          colKey: "roleName",
          title: "角色名称",
          align: "center"
        },
        {
          colKey: "roleKey",
          title: "权限字符",
          align: "center"
        },
        {
          colKey: "createTime",
          title: "创建时间",
          align: "center"
        }
      ],
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
      userId:0,
      dataLoading: false,
      pagination: {
        current: 1,
        pageSize: 10,
        total: 0,
        showPageSize: true,
        pageSizeOptions: [10, 20, 30, 50],
        showFirstAndLastPageBtn: false,
        onChange: (pageInfo) => {
          Object.assign(this.pagination,pageInfo)
          this.queryParams.pageNum = pageInfo.current || 1;
          this.queryParams.pageSize = pageInfo.pageSize;
          this.getList()
        },
      },
    }
  },
  created() {
    const userId = this.$route.params && this.$route.params.userId;
    if (userId) {
      this.userId = userId;
      this.getList();
    }
  },
  methods: {
    getList() {
      this.dataLoading = true;
      getAuthRole(this.userId).then(
        (res) => {
          this.formData = res.user;
          this.data = res.roles;
          this.data.forEach(row =>{
            if(row.flag){
              this.roleIds.push(row.id);
            }
          })
          this.pagination.total = res.roles.length;
          this.dataLoading = false;
        }).catch((e) => {
        this.dataLoading = false;
        this.$message.error(e.toString());
      });
    },
    onSubmit() {
      const userId = this.formData.id;
      updateAuthRole({ id: userId, roleIds:this.roleIds }).then((response) => {
        this.$message.success("授权成功");
        // this.close();
      }).catch((e) => {
        this.$message.error(e.toString());
      });
    },
    close() {
      const obj = {path: "/home/system/user"};
      this.$tab.closeOpenPage(obj);
    }
  }
}
</script>

<style scoped>
.form-header {
  font-size: 15px;
  color: #6379bb;
  border-bottom: 1px solid #ddd;
  margin: 8px 10px 25px 10px;
  padding-bottom: 5px;
}
</style>
